/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Grid, Input, Select, DatePicker, Button } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { noteTypes } from '../../../../conf/noteTypeConfig';

const { Row, Col } = Grid;

export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {
    handleSearch: PropTypes.func,
  };

  static defaultProps = {
    handleSearch: () => {
      return function(e) {
        e.preventDefault();
      }
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      value: {
        sStatus: 'all',
        sType: 'all',
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  render() {
    return (
      <div>
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.formChange}
          ref="form"
        >
          <Row wrap gutter="20" style={{
            ...styles.formRow,
            margin: 0,
          }}>
            <Col l="5">
              <div style={styles.formItem}>
                <span style={styles.formLabel}>搜索：</span>
                <IceFormBinder triggerType="onBlur" name="sStr">
                  <Input
                    onPressEnter={this.props.handleSearch(this.state.value)}
                    placeholder="请输入"
                    size="medium"
                    style={{ width: '160px' }}
                  />
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name="sStr" />
                </div>
              </div>
            </Col>
            <Col l="5">
              <div style={styles.formItem}>
                <span style={styles.formLabel}>类型：</span>
                <IceFormBinder triggerType="onBlur" name="sType">
                  <Select size="medium"  style={{ width: '160px' }}>
                    {
                      noteTypes.map((ele, idx) => {
                        return <Select.Option key={idx} value={ele.enName}>{ele.name}</Select.Option>;
                      })
                    }
                    <Select.Option key={100} value={'all'}>全部</Select.Option>
                  </Select>
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name="sType" />
                </div>
              </div>
            </Col>
            <Col l="5">
              <div style={styles.formItem}>
                <span style={styles.formLabel}>状态：</span>
                <IceFormBinder triggerType="onBlur" name="sStatus">
                  <Select size="medium"  style={{ width: '160px' }}>
                    <Select.Option value="未提交">未提交</Select.Option>
                    <Select.Option value="审批中">审批中</Select.Option>
                    <Select.Option value="未通过">未通过</Select.Option>
                    <Select.Option value="进行中">进行中</Select.Option>
                    <Select.Option value="已关闭">已关闭</Select.Option>
                    <Select.Option value="all">全部</Select.Option>
                  </Select>
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name="sStatus" />
                </div>
              </div>
            </Col>
            <Col l="5">
              <div style={styles.formItem}>
                <span style={styles.formLabel}>日期：</span>
                <IceFormBinder triggerType="onBlur" name="sTime">
                  <DatePicker size="medium"  style={{ width: '160px' }}/>
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name="sTime" />
                </div>
              </div>
            </Col>
            <Col l="3">
              <div style={styles.formItem}>
                <Button type='primary' onClick={this.props.handleSearch(this.state.value)}>查询</Button>
              </div>
            </Col>
          </Row>
        </IceFormBinderWrapper>
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formLabel: {
    minWidth: '50px',
    fontSize: '14px',
  },
};
